<template>
  <div id="main" class="container">
    <div class="inner-box">
      <div class="tenant-list">
        <div style="line-height: 50px;text-align: center;color: #666666">请选择企业</div>
        <div class="item" v-for="item in tenantList" @click="$router.push({path:'/service?tenantId=' + item.tenantId})">
          <div class="avatar">
            <el-avatar class="avatar-img" :size="50" src="https://contacts.zoho.com.cn/file?ID=40772320&fs=thumb">
              <img :src="item.avatar"/>
            </el-avatar>
          </div>
          <div class="name" v-text="item.name?item.name:'未命名企业'"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {findTenantList} from "@/api/tenant";

export default {
  name: "home",
  data(){
    return {
      tenantList: [],
      showTenantList: false
    }
  },
  created() {
    findTenantList().then(res => {
      this.tenantList = res.data
    })
  }
}
</script>

<style scoped lang="less">
  .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .inner-box {
      position: relative;
      width: 100%;
      max-width: 640px;
      min-width: 300px;
      height: 80%;
      box-shadow: 0px 0px 50px #A9B2BB;

      .tenant-list {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: #FFFFFF;
        padding: 15px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .item {
          display: flex;
          align-items: center;
          border-radius: 4px;
          margin-bottom: 15px;
          cursor: pointer;
          box-shadow: 0px 0px 5px rgba(0,0,0,.2);
          .avatar {
            width: 50px;
            height: 50px;
            padding: 15px;
          }
          .name {
            margin-left: 15px;
          }
          &:hover {
            .name {
              color: #0091ff;
            }
          }
        }
      }
    }
  }

  @media(max-width: 679px) {
    .container {
      .inner-box {
        width: 100%;
        height: 100%;
      }
    }
  }


</style>
